import { LocationFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import {defineComponent, ref} from 'vue';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import AddressItem from "../../components/AddressItem";
import ysmz from "@/assets/images/ysmz.png"
import zywz from "@/assets/images/zywz.png"
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Pagination from "@/components/Pagination";
import zwsj from "@/assets/images/zwsj.png";
import BreadCrumb from "@/components/BreadCrumb";
import {Address} from "cluster";
import {dzInfo} from "@/api/typing";
import {getsfxx, getsqxx} from "@/api/his";
import {useRoute} from "vue-router";

// 引入Item信息类型定义
interface ItemInfo {
    id: string;
    name: string;
}
export default defineComponent({
    setup() {
        // 定义Item数据列表
        // const items = [
        //     {
        //         id: "1",
        //         name: "郑州市"
        //     },
        //     {
        //         id: "2",
        //         name: "开封市"
        //     },
        //     {
        //         id: "3",
        //         name: "洛阳市"
        //     },
        //     {
        //         id: "4",
        //         name: "平顶山市"
        //     },
        //     {
        //         id: "5",
        //         name: "安阳市"
        //     },
        //     {
        //         id: "6",
        //         name: "鹤壁市"
        //     },
        //     {
        //         id: "7",
        //         name: "新乡市"
        //     },
        //     {
        //         id: "8",
        //         name: "焦作市"
        //     },
        //     {
        //         id: "9",
        //         name: "濮阳市"
        //     },
        //     {
        //         id: "10",
        //         name: "许昌市"
        //     },
        //     {
        //         id: "11",
        //         name: "漯河市"
        //     },
        //     {
        //         id: "12",
        //         name: "三门峡市"
        //     },
        //     {
        //         id: "13",
        //         name: "南阳市"
        //     },
        //     {
        //         id: "14",
        //         name: "商丘市"
        //     },
        //     {
        //         id: "15",
        //         name: "信阳市"
        //     },
        //     {
        //         id: "16",
        //         name: "周口市"
        //     },
        //     {
        //         id: "17",
        //         name: "驻马店市"
        //     },
        //
        //
        // ];
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 分页组件返回当页数据
        const area = ref<ItemInfo[]>([])
        const handlePageChange = (Datas:any) => {
            area.value = Datas;
        };

        const items = ref<dzInfo []>([]);
        const route = useRoute();
        const {id,name} = JSON.parse(route.query.itemInfo as string);//省份 id 和 名称
        // 获取省份信息
        async function getsqxxaddress() {
            const res = await getsqxx({
                id: id,
                name: name
            })
            items.value = res.rows!;
        }
        getsqxxaddress();
        return () => (<>

            <UserInfo></UserInfo>
            <div class={Style.container_mar}>
                <div class={Style.title}>
                    <div>
                        <BreadCrumb />
                    </div>
                </div>

                <div class={Style.container}>
                    {
                        area.value.map(item => (
                            <AddressItem
                                key={item.id}
                                to={'/xqxzAddress'}
                                itemInfo={item}  // 传递完整的item信息
                            >
                                {item.name}
                            </AddressItem>
                        ))

                    }
                </div>
                <Pagination

                    style={{  padding: "0 64px" ,marginBottom:"10px",}}
                    pageSize={20}
                    Data={items.value}
                    onPageChange={handlePageChange}
                ></Pagination>
            </div>

        </>);
    }
})

